{% extends "base.html" %}

{% block title %}Cal Portal{% endblock %}

{% block head %}
<style>
  
  .container {
    min-height: 100%;
    position: relative;
  }
  
  .stretch-down {
    position: absolute;
  }
  
  .black-stripe {
    padding-bottom: auto;
    margin-bottom: 0;
    background-color: rgba(0,0,0,0.40);
    border-radius: 50px;
  }
  
  .mobile {
    width: 100%;
  }
  
  .center-page {
    
  }
</style>
<script src="/static/js/jQueryRotateCompressed.2.2.js"></script>
<script>
var buildings;

function update() {
  
}

function navigate() {
  var query = $("#building_search").val();
  $.getJSON('/api/search?query=' + query, function(data) {
    if (data.success == 'true') {
      window.location = data.url;
    } else {
      alert('failed');
    }
  });
}

function aperture_rotate() {
  $("#aperture-logo").rotate({bind:{
      hover: function(){
          $(this).rotate({
              duration: 6000,
              angle: 0, 
              animateTo:360,
          });
      }
  }});
}
    

$(document).ready(function(){
  $.getJSON('/api/buildings', function(data){
    buildings = data.buildings;
    /*
    $("#building_search").autocomplete({
      source: buildings,
      select: navigate
    });*/
    $('#building_search').typeahead({
      source: buildings
    })
  });
  
  $("#go-button").click(navigate);
  $("#building_search").keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13') {
      navigate();
    }
  });
  
  $("#aperture-logo").hover(function(){
    aperture_rotate();
  });
});

</script>
{% endblock head %}

{% block container %}
<div class="row stretch-down visible-desktop">
  <div class="span8 offset2 stretch-down black-stripe">
    <div class="center-page" id="main-container">
      <div id="aperture-logo"></div>
      <input type="text" id="building_search" autofocus="autofocus" placeholder="Enter in a building name" data-provide="typeahead">
      <div class="buttons">
        <input type="button" id="go-button" class="btn btn-info large-button" value="Take me there">
        <input type="button" id="lucky-button" class="btn btn-orange large-button" value="I'm feeling lucky">
      </div>
      <div id="results">
      </div>
    </div>
  </div>
</div>
<div class="hidden-desktop black-stripe mobile">
  <div id="aperture-logo"></div>
  <input type="text" id="building_search" autofocus="autofocus" placeholder="Enter in a building name" data-provide="typeahead">
  <div class="buttons">
    <input type="button" id="go-button" class="btn btn-info large-button" value="Take me there">
    <input type="button" id="lucky-button" class="btn btn-orange large-button" value="I'm feeling lucky">
  </div>
  <div id="results">
  </div>
</div>
{% endblock %}